<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../../jQuery-JS/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        /*
        需求：
        1.读取第一个div的title属性
        2.给所有的div设置name属性（value为atguigu）
        3.移除所有div的title属性
        4.给所有的div设置class="guiguClass"
        5.给所有的div添加class="abc"
        6.移除所有div的guigucClass的class
        7.得到最后一个li的标签体文本
        8.设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
        9.得到输入框中的value值
        10.将输入框的值设置为atguigu
        11.点击“全选”按钮实现全选
        12.点击“全不选”按钮实现全不选
        */
        $(function(){
            //1.读取第一个div的title属性
            var $div_first=$("div:first");
            //console.log($div_first);
            console.log($div_first.attr("title"));

            //2.给所有的div设置name属性（value为atguigu）
            var $all_div=$("div");
            console.log($all_div);
            $all_div.attr("name","atguigu");

            //3.移除所有div的title属性
            $all_div.removeAttr("title");

            //4.给所有的div设置class="guiguClass"
            $all_div.attr("class","guiguClass");

            //5.给所有的div添加class="abc"
            $all_div.addClass("abc");

            //6.移除所有div的guigucClass的class
            $all_div.removeClass("guiguClass");

            //7.得到最后一个li的标签体文本
            var $li_last=$("li:last");
            console.log($li_last.html());

            //8.设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
            var $li_first=$("li:first");
            $li_first.html("<h1>mmmmmmmmm</h1>");

            //9.得到输入框中的value值
            var $input_text=$(":input:text");
            console.log($input_text);
            console.log($input_text.val()); 

            //10.将输入框的值设置为atguigu
            $input_text.val("atguigu");

            //11.点击“全选”按钮实现全选
            var $button_first=$("button:first");
            //console.log($button_first);
            $button_first.click(function(){
                var $input_checkbox=$(":input:checkbox");
                //console.log($input_checkbox);
                $input_checkbox.attr("checked",true);
            })

            //12.点击“全不选”按钮实现全不选
            var $button_last=$("button:last");
            //console.log($button_last);
            $button_last.click(function(){
                var $input_checkbox=$(":input:checkbox");
                //console.log($input_checkbox);
                $input_checkbox.attr("checked",false);
            })
        })
    </script>
</head>
<body>
    <div id="div1" class="box" title="one">class为box的div1</div>
    <div id="div2" class="box" title="two">class为box的div2</div>
    <div id="div3">div3</div>
    <span class="box">class为box的span</span>
    <br>
    <ul>
        <li>AAAAA</li>
        <li title="hello" class="box2">BBBBB</li>
        <li class="box">CCCCC</li>
        <li title="hello">DDDDD</li>
        <li title="two"><span>BBBBB</span></li>
    </ul>

    <input type="text" name="username" value="guiguClass">
    <br>
    <input type="checkbox" >
    <input type="checkbox">
    <br>
    <button>选中</button>
    <button>不选中</button>
</body>
</html>